<div class="container" id="messages-page">
    <ul class="nav nav-tabs messages-nav">
        <li class="active inbox-nav"><a href="#inbox" data-toggle="tab">Inbox</a></li>
        <li class="sentbox-nav"><a href="#sentbox" data-toggle="tab">Sentbox</a></li>
        <li class="draft-nav"><a href="#draft" data-toggle="tab">Draft</a></li>
    </ul>
    <div class="tab-content messages-container">
        <!--Inbox-->
        <div class="tab-pane active" id="inbox">
            <div class="container inbox-filter">
                <div class="row">
                    <div class="col-md-3">
                        <a href="#compose-msg-popup" role="button" data-toggle="modal" class="btn btn-primary">Compose Message</a>
                    </div>
                    <div class="col-md-5">
                    </div>
                    <div class="col-md-3">
                        <form class="form-inline" role="form">
                             <div class="input-group">
                                <input type="text" class="form-control" name="search_file" placeholder="Search Inbox Messages...">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <button class="btn btn-default btn-delete-inbox hide-element" data-toggle="modal" 
                    data-target="#delete-inbox-popup" title="Delete Inbox Message/s"><span class="glyphicon glyphicon-trash"></span> Delete
            </button>
            <div class="table-responsive">
                <table class="table table-bordered inbox-list">
                    <thead>  
                        <tr>  
                            <th style="width: 1%;"><input type="checkbox" class="check-all-inbox"/></th>
                            <th style="width: 20%;">Sender</th>
                            <th>Subject</th>
                            <th style="width: 15%;">Sent Date</th>
                            <th style="width: 1%;"></th>
                            <th style="width: 1%;"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if($inbox === FALSE){?>
                            
                        <?php }else{ ?>
                            <?php foreach ($inbox as $item) {?>
                            <tr>
                                <td><input type="checkbox" class="item-inbox-checkbox" value="<?php echo $item['msg_id'] ?>"/></td>
                                <td><?php echo $item['lname'].','.$item['fname'] ?></td>  
                                <td><a href="#" data-msgid="<?php echo $item['msg_id'] ?>"><?php echo $item['subject'] ?></a></td>
                                <td><?php echo $item['date'] ?></td>
                                <td><a href="#" class="btn btn-primary btn-xs" role="button" data-toggle="modal" title="Reply Message" data-msgid="<?php echo $item['msg_id'] ?>">
                                        <span class="glyphicon glyphicon-comment"></span></a>
                                </td>
                                <td><a href="#" class="btn btn-primary btn-xs" role="button" data-toggle="modal" title="Forward Message" data-msgid="<?php echo $item['msg_id'] ?>">
                                        <span class="glyphicon glyphicon-share-alt"></span></a>
                                </td>
                            </tr>
                            <?php } ?>
                        <?php } ?>
                    </tbody>  
                </table>
            </div>
        </div>
        <!--New Message Modal-->
        <div class="modal fade" id="compose-msg-popup" tabindex="-1" role="dialog" aria-labelledby="compose-msg" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="compose-msg">Compose Message</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label for="filename" class="col-sm-2 control-label">To</label>
                                <div class="col-sm-10">
                                    <select class="form-control select-file-type" name="file_type">
                                        <option>Recipient</option>
                                        <option value="1">Reports</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="n-subject" class="col-sm-2 control-label">Subject</label>
                                <div class="col-sm-10">
                                    <input type="text" name="subject" id="n-subject" class="form-control" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="filename" class="col-sm-2 control-label"></label>
                                <div class="col-sm-10">
                                    <textarea class="form-control" style="height: 300px;" name="msg_body" id="n-body">

                                    </textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="attachment" class="col-sm-2 control-label">Attachment</label>
                                <div class="form-inline col-sm-10">
                                    <div class="input-group">
                                       <input type="text" class="form-control" name="file" id="file-upload">
                                       <span class="input-group-btn">
                                           <a class="btn btn-default btn-browse-file" type="button" title="Browse Files"><span class="glyphicon glyphicon-paperclip"></span></a>
                                       </span>
                                   </div>
                               </div>
                                <input type="file" name="userfile" style="display:none;" id="userfile" />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-default btn-save">Save Draft</button>
                        <button type="button" class="btn btn-primary btn-send">Send</button>
                    </div>
                </div>
            </div>
        </div>
        <!--Delete File Modal-->
        <div class="modal fade" id="delete-file-popup" tabindex="-1" role="dialog" aria-labelledby="delete-file" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="delete-file">Delete File/s</h4>
                    </div>
                    <div class="modal-body">
                        <h4>Are you sure you want to delete the checked items?</h4>
                        <p><b>Note: </b>This action cannot be undone.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default btn-no" data-dismiss="modal">No</button>
                        <button type="button" class="btn btn-primary btn-yes">Yes</button>
                    </div>
              </div>
            </div>
        </div>
    </div>
</div>